<template>
  <div>
    <h3>{{x}}</h3>
    <p>{{y}}</p>
    <div><span>请输入你要购买的斤数:</span><input type="text"  v-model.number="z"></div>
    <div><button @click="btn">结账买单~</button></div>
    <div><span>结账单: 总价:{{h}} ￥元</span>  折后价:<span>{{I}}￥元  </span>省了:<span>{{J}}￥元</span></div>
  </div>
</template>

<script>
export default {
data(){
  return {
    x:'欢迎光临-vue开发的收银系统-水果店',
    y:'苹果10￥/斤，折扣<8折>',
    z:'',
    h:0,
    I:0,
    J:0,
  }
},
methods:{
  btn(){
    this.h= this.z * 10 
    this.I= this.z * 10 *0.8
    this.J= this.h -this.I
    this.z = ''
  }
}
}
</script>

<style>
  div {
    width: 600px;
    margin: 10px auto;
    text-align: center;
  }
 div  p {
    text-align: center
  }
  </style>
  
